@charset "utf-8";
@import "utils";
@import "animate";
/*@import "common";*/


/*@import "reset";*/

.GoodsDetails {
    @include web;
    //头部引入
    //主要内容 
    .content {
        @include midContent;
        //商品详情《标题》 
        .title {
            margin-top: r(54);
            span {
                display: block;
                width: r(82);
                height: r(6);
                background: #f19272;
                margin: 0 auto;
            }
            h4 {
                font-size: r(28+8);
                color: #e39d88;
                line-height: r(70);
                text-align: center;
                letter-spacing: r(8);
                margin-left: r(8);
                //              padding-left: r(-8);
            }
        }
        //轮播图
        .lunbo {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin-top: r(40);
            ul {
                li {
                    width: 100%;
                    height: r(373);
                    overflow: hidden;
                    img {
                        width: 100%;
                        @include abCenter;
                    }
                }
            }
            .swiper-button-prev,
            .swiper-button-next {
                font-size: r(25+8);
                left: 45%;
                bottom: r(10);
                top: auto;
                background: none;
                color: #f19272;
                width: auto;
                height: auto;
                z-index: 1;
            }
            .swiper-button-next {
                left: auto;
                right: 45%;
            }
        }
        //内容详情
        .DetailsOfTheContent {
            width: r(680);
            margin: 0 auto;
            //im电视墙板
            .TV_wall {
                overflow: hidden;
//              height: r(50);
                line-height: r(50);
                margin-top: r(35);
                font-size: 0;
                padding-left: r(9);
                h4 {
                    vertical-align: middle;
                    font-weight: normal;
                    font-size: r(28+8);
                    color: #5e5e5e;
                    line-height: r(32);
                    letter-spacing: r(6);
                    display: inline-block;
                }
                span {
                    vertical-align: middle;
                    display: inline-block;
                    font-size: r(20+8);
                    color: #9c9c9c;
                }
                .askMeBtn {
                    font-size: r(20+8);
                    color: white;
                    text-align: center;
                    height: r(50);
                    line-height: r(50);
                    display: inline-block;
                    padding: 0 r(25);
                    float: right;
                    background: #e39d88;
                }
                
            }
            //数额
            .TheAmountOf {
                overflow: hidden;
                font-size: r(30+8);
                color: #e39d88;
                height: r(87);
                line-height: r(87);
                padding-left: r(10);
                span {
                    display: inline-block;
                    float: left;
                }
                ul {
                    float: right;
                    font-size: 0;
                    display: inline-block;
                    height: r(87);
                    line-height: r(87);
                    li {
                        vertical-align: middle;
                        font-size: r(25+8);
                        display: inline-block;
                        width: r(52);
                        height: r(45);
                        line-height: r(45);
                        text-align: center;
                        border: 1px solid #dbdbdb;
                        color: #9c9c9c;
                    }
                    li:nth-child(2) {
                        padding: 0 r(10);
                        width: auto;
                        border-left: none;
                        border-right: none;
                        min-width: r(30);
                    }
                }
            }
            //质量保证
            .QualityAssurance {
                padding: r(0) r(9);
                padding-bottom: r(5);
                border-bottom: r(1) solid #dbdbdb;
                margin-top: r(15);
                .ReturnOfGoods {
                    float: left;
                    position: relative;
                    height: r(46);
                    font-size: 0;
                    .left {
                        width: r(26);
                        height: r(26);
                        overflow: hidden;
                        display: inline-block;
                        //line-height: r(26);
                        border-radius: 50%;
                        vertical-align: middle;
                        img {
                            height: 100%;
                        }
                    }
                    .cont {
                        width: r(176);
                        vertical-align: middle;
                        display: inline-block;
                        font-size: r(22+8);
                        color: #a2a2a2;
                        margin-left: r(14);
                        overflow: hidden;
                        p{
                            font-size: r(22+8); 
                        }
                    }
                }
            }
            //规格介绍
            .SpecificationIntroduce {
                .Specification {
                    margin-top: r(25);
                    position: relative;
                    font-size: r(24+8);
                    color: #e39d88;
                    line-height: r(56);
                    border-bottom: r(1) solid #dbdbdb;
                    padding-left: r(9);
                    span {
                        width: r(582);
                        font-size: r(24+8);
                        color: #a2a2a2;
                        line-height: r(46);
                    }
                }
                .Specification:nth-of-type(2) {
                    border-bottom: none;
                }
            }
            //产品介绍
            .ProductIntroduction {
                text-indent: 2em;
                border-right: 1px solid;
                width: r(666);
                height: r(212);
                overflow: auto;
                line-height: r(43);
                font-size: r(22+8);
                color: #a2a2a2;
                padding: r(7) r(8);
            }
        }
    }
    //第二只要内容
    .recommend {
        margin-top: r(40);
        position: relative;
        >ul {
            border-bottom: 1px solid #b9bab9;
            white-space: nowrap;
            padding-top: r(29);
            position: relative;
            li {
                display: inline-block;
                font-size: r(24+8);
                height: r(70);
                line-height: r(70);
                margin: 0 r(28);
                width: r(150);
                padding-left: r(10);
                text-align: center;
            }
            >hr {
                height: r(5);
                margin: 0;
                position: absolute;
                transition: all .3s;
                bottom:r(-3);
            }
        }
        //二级菜单
        .list {
            width: 100%;
            margin: r(24) 0;
            margin-top: r(54);
            &>ul {
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                position: relative;
                li {
                    width: 100%;
                    position: relative;
                    top: 0;
                    left: 0;
                    display: none;
                    p {
                        width: 98%;
                        white-space: normal;
                        font-size: r(22+8);
                        line-height: 1.5;
                        color: #5e5e5e;
                        margin: 0 auto;
                    }
                    &>div:not(.mod){
                        width: 98%;
                        font-size: r(22+8);
                        line-height: 1.5;
                        margin-left: auto;
                        margin-right: auto;
                        color:#5e5e5e;
                        img{
                            display: block;
                            width: 100%;
                            height: auto;
                            margin: 0 auto;
                        }
                    }
                    .mod {
                        width: 100%;
                        height: r(327);
                        position: relative;
                        overflow: hidden;
                        border-radius: r(10);
                        margin-top: r(25);
                        img {
                            width: 100%;
                            @include abCenter;
                        }
                    }
                    >h3 {
                        font-size: r(28+8);
                        color: #e39d88;
                        text-align: center;
                        margin-top: r(20);
                    }
                    >ul {
                        width: 100%;
                        white-space: nowrap;
                        font-size: 0;
                        >li {
                            width: r(220);
                            margin-right: r(21);
                            position: relative;
                            display: inline-block;
                            overflow: hidden;
                            >img {
                                width: 100%;
                               @include abCenter;
                            }
                            &:nth-child(3n) {
                                margin-right: 0;
                            }
                        }
                        .pciHeight {
                            height: r(220);
                            margin-top: r(45);
                        }
                        .pciHeight_1 {
                            height: r(120);
                            margin-top: r(38);
                        }
                    }
                    div.line {
                        width: r(82);
                        height: r(6);
                        background-color: #f7a181;
                        margin: 0 auto;
                        margin-top: r(72);
                    }
                }
                li.hierarchy {
                    display: block;
                }
            }
        }
    }
    //弹出层
    .selectSpecific {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(76, 76, 76, .5);
        top: 0;
        z-index: 101;
        box-sizing: border-box;
        .selCon {
            box-sizing: border-box;
            padding: 0 r(20);
            width: 100%;
            background: white;
            position: absolute;
            bottom: r(120);
            .selTitle {
                padding: 0 r(20);
                border: 1px solid transparent;
                font-size: 0;
                .proImg {
                    display: inline-block;
                    border: r(1) solid #c0c0c0;
                    margin-top: r(-72);
                    width: r(212);
                    height: r(212);
                    position: relative;
                    overflow: hidden;
                    img {
                        @include abCenter;
                        width: 100%;
                    }
                }
                .proInfo {
                    margin-left: r(30);
                    width: r(405);
                    overflow: hidden;
                    display: inline-block;
                    font-size: r(25+8);
                    margin-top: r(10);
                    .price {
                        font-size: r(25+8);
                        color: #eba593;
                        margin-bottom: r(30);
                        span{
                            font-size: r(25+8);
                        }
                    }
                    .color {
                        margin-bottom: r(5);
                        color: #777777;
                        font-size: r(25+8);
                        span {
                            font-size: r(25+8);
                            margin-left: r(10);
                        }
                    }
                }
            }
            .selItem {
                margin-top: r(45);
                li {
                    box-sizing: border-box;
                    padding: 0 r(20);
                    padding-bottom: r(28);
                    border-bottom: r(1) solid #c2c2c2;
                    overflow: hidden;
                    margin-top: r(32);
                    line-height: 0.5;
                    p:first-of-type {
                        width: r(400);
                        overflow: hidden;
                        font-size: r(26+8);
                        color: #777;
                        margin-bottom: r(30);
                        line-height: 1.0;
                    }
                    &>span {
                        margin-left: r(10);
                        margin-top: r(10);
                        font-size: r(24+8);
                        color: white;
                        display: inline-block;
                        height: r(42);
                        line-height: r(42);
                        padding: 0 r(20);
                        border-radius: r(10);
                        background: #eba593;
                        text-align: center;
                    }
                    .proNum {
                        float: right;
                        font-size: 0;
                        margin-top: r(-50);
                        span {
                            vertical-align: middle;
                            font-size: r(25+8);
                            display: inline-block;
                            width: r(52);
                            height: r(45);
                            line-height: r(45);
                            text-align: center;
                            border: 1px solid #dbdbdb;
                            color: #9c9c9c;
                        }
                        span:nth-of-type(2) {
                            padding: 0 r(10);
                            width: auto;
                            border-left: none;
                            border-right: none;
                            min-width: r(30);
                        }
                        
                    }
                }
            }
        }
    }
    //底部层级提高
    .indexFooter {
        z-index: 102;
    }
}